<template>
  <view
    :class="['zm-page', 'pageBgColor', customClass, linearBg ? 'page-linear-bg' : '', pureBg ? 'linear-bg' : '', $slots.footer || $slots.header ? 'has-slot' : '']"
    :style="customStyle"
  >
    <view class="before" v-if="linearBg"></view>
    <slot name="header" />
    <view class="linear-content" v-if="linearBg">
      <slot />
    </view>
    <view class="pageMain" v-else>
      <slot />
    </view>
    <slot name="footer" />
    <tab-bar v-if="hasBaseSet"></tab-bar>
  </view>
</template>

<script>
  /** 调用组件方法 components：组件名称，opts: 组件参数
   * uni.$emit('gloabal', { components: 'author', opts: { show: true } })
   */
  import styleMixins from '@/mixins/styleMixins'
  import TabBar from '@/components/TabBar'
  export default {
    name: 'yy-page',
    mixins: [styleMixins],
    components: { TabBar },
    props: {
      hasTab: { type: Boolean, default: false },
      linearBg: { type: [Boolean, Number], default: false },
      pureBg: { type: Boolean, default: false }
    },
    computed: {
      hasBaseSet() {
        return this.$store.state.baseSet && this.$store.state.baseSet.bottomMenu && this.hasTab
      }
    },
    data() {
      return {}
    },
    methods: {},
    created() {}
  }
</script>

<style lang="scss" scoped>
  .zm-page {
    &.has-slot {
      // #ifndef MP-ALIPAY
      height: 100%;
      // #endif
      // #ifdef MP-ALIPAY
      height: 100vh;
      // #endif
      display: flex;
      width: 100%;
      flex-direction: column;
      box-sizing: border-box;
    }
    min-height: 100vh;
    display: flex;
    flex-direction: column;
  }
</style>
